<%@page import="org.springframework.context.annotation.Import"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection" />
<title>会员注册</title>
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
<link rel="stylesheet" href="${contextPath}/views/css/reglogStyle.css">


</head>
<body>
	<!-- <div class="ui-form ui-border-t" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto;  height: 300px;"> -->
		<!-- <div class="ui-form-item">
			<input name="phone" type="tel" maxlength="11" placeholder="手机号">
			<a href="javascript:void(0);" class="ui-icon-close"></a>
		</div>
		<div id="valicode" class="ui-form-item ui-border-b ui-row-flex ui-whitespace">
			<div class="ui-col ui-col-2">
				<input name="valicode" type="tel" maxlength="6" placeholder="验证码" style="position: relative; top: 12px;">
			</div>
			<div class="ui-col">
				<button id="sendSmsBtn" type="button" class="ui-btn" style="float: right; position: relative; top: 10px; padding: 0px 8px 0px 8px; width: 107px;">获取验证码</button>
			</div>
		</div>
		<div id="pwd" class="ui-form-item ui-border-b">
			<input name="pwd" type="password" maxlength="12" placeholder="设置密码（须6位以上，支持纯数字）" style="position: relative; top: 12px;">
			<a href="javascript:void(0);" class="ui-icon-close"></a>
		</div>
		<div id="xyck" class="ui-form-item ui-form-item-checkbox" style="margin-top: 10px; left: 30px;">
			<label class="ui-checkbox">
				<input type="checkbox" style="position: relative; top: 17px;">
			</label>
			<p style="display: inline; font-size: 15px; position: absolute; left: 46px; top: -5px;">
				我已阅读并同意 <a href="javascript:$('#xyWin').fadeIn(300);">《会员协议》</a>
			</p>
		</div>
		<div class="ui-btn-wrap">
			<button id="regbtn" type="button" class="ui-btn-lg ui-btn-primary">注册并登录</button>
		</div> -->
	<!-- </div> -->
	
	<div class="topTitle">注册</div>
	
	<div class="phone-div-reg">
		<input name="phone" maxlength="11" placeholder="请输入手机号">
		<!-- <a href="javascript:void(0);" class="ui-icon-close"></a> -->
	</div>
	<div class="valicode-outer-div">
		<div class="valicode-inner-div">
			<input name="valicode" maxlength="6" placeholder="请输入验证码">
			<button id="sendSmsBtn" type="button" >获取验证码</button>
		</div>
	</div>
	<div class="phone-div-reg">
		<input name="pwd" type="password" maxlength="18" placeholder="请设置密码(须6位以上，支持纯数字)">
		<!-- <a href="javascript:void(0);" class="ui-icon-close"></a> -->
	</div>
	<div id="xyck" class="checkBox-div">
		<input type="checkbox" >
		<span>
			我已阅读并同意 <a href="javascript:$('#xyWin').fadeIn(300);">《会员协议》</a>
		</span>
	</div>
	<div id="regbtn" class="regBtn-div" >注册并登录</div>
	
	<div id="xyWin" class="ui-dialog show" style="display: none;">
		<div class="ui-dialog-cnt" style="height: 424px;">
			<div class="ui-dialog-bd" style="height: 375px; padding: 10px;">
				<h3 style="position: absolute; top: 5px; left: 120px;">会员协议</h3>
				<div style="overflow-y: auto; width: 100%; height: 335px; top: 14px; position: relative;">
					<%@ include file="reg_agreement.jsp"%>
				</div>
			</div>
			<div class="ui-dialog-ft">
				<button type="button" data-role="no">取消</button>
				<button type="button" data-role="yes" class="btn-recommand">同意</button>
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".phone-div-reg").find("input").keyup(function() {
			var $this = $(this);
			var $parent = $this.parent();
			if ($this.val())
				$parent.find(".ui-icon-close").fadeIn(300);
			else
				$parent.find(".ui-icon-close").fadeOut(300);
		});

		$(".phone-div-reg").find(".ui-icon-close").click(function() {
			var $this = $(this);
			var $parent = $this.parent();
			$parent.find("input").val("");
			$this.fadeOut(300);
		});

		/**发送短信验证码**/
		$("#sendSmsBtn").click(function() {
			var $this = $(this);
			if ($this.hasClass("disabled"))
				return;

			var $phone = $("input[name='phone']"), phone = $phone.val();
			if (!phone) {
				alert("手机号为空！");
				$phone.focus();
				return;
			}
			if (!/^1[0-9]{10}$/.test(phone)) {
				alert("手机号格式错误！");
				$phone.focus();
				return;
			}

			$.ajax({
				url : "${contextPath}/wechat/smsValicode",
				type : "post",
				dataType : "json",
				data : JSON.stringify({
					params : {
						phone : phone,
						type : "reg"
					}
				}),
				cache : false,
				contentType : "application/json",
				beforeSend : function(xhr) {
					$this.addClass("disabled");
				},
				success : function(res, succ, xhr) {
					if (res) {
						if (res.success) {
							$this.text("重新获取(60s)");
							var start = parseInt((new Date()).getTime() / 1000);
							var timer = setInterval(function() {
								var now = parseInt((new Date()).getTime() / 1000);
								var diff = now - start;
								var over = 60 - diff;
								if (over >= 0) {
									$this.text("重新获取(" + over + "s)");
								} else {
									clearInterval(timer);
									$this.text("获取验证码").removeClass("disabled");
								}
							}, 1000);
						} else {
							$this.text("获取验证码").removeClass("disabled");
							if (res.msg)
								alert(res.msg);
						}
					}
				},
				error : function(xhr, errorType, errorInfo) {
					$this.removeClass("disabled");
					alert("请求错误！");
				},
				complete : function(xhr, ts) {
				}
			});
		});

		/**checkbox协调处理**/
		$("#xyck").find("input[type='checkbox']").click(function() {
			var $this = $(this);
			if ($this.attr('checked')){
				$this.removeAttr("checked");
				$this.css("background","");
			} else {
				$this.attr("checked", "checked");
				$this.css("background","url(${contextPath}/views/images/checked.png) no-repeat center center");
				$this.css("-webkit-appearance", "none");
			}
		}); 

		/**弹出层点击事件**/
		$(".ui-dialog").find("button[data-role='no']").click(function() {
			var $inpt = $('#xyck').find("input[type='checkbox']");
			if ($inpt.attr("checked") == "checked") {
				/* $inpt.click(); */
				$inpt.removeAttr("checked");
				$inpt.css("background-image","");
			}
			$(".ui-dialog").fadeOut(300);
		});
		$(".ui-dialog").find("button[data-role='yes']").click(function() {
			var $inpt = $('#xyck').find("input[type='checkbox']");
			if ($inpt.attr("checked") != "checked") {
				//$inpt.click();
				$inpt.attr("checked", "checked");
				$inpt.css("background-image","url(${contextPath}/views/images/checked.png)");
			}
			$(".ui-dialog").fadeOut(300);
		});

		/**注册**/
		$("#regbtn").click(function() {
			var $phone = $("input[name='phone']");
			var phone = $phone.val();
			if (!phone) {
				alert("手机号为空！");
				$phone.focus();
				return;
			}
			if (!/^1[0-9]{10}$/.test(phone)) {
				alert("手机号格式错误！");
				$phone.focus();
				return;
			}

			var $valicode = $("input[name='valicode']");
			var valicode = $valicode.val();
			if (!valicode) {
				alert("验证码为空！");
				$valicode.focus();
				return;
			}
			if (valicode.length != 6) {
				alert("验证码错误！");
				$valicode.focus();
				return;
			}

			var $pwd = $("input[name='pwd']");
			var pwd = $pwd.val();
			if (!pwd) {
				alert("密码为空！");
				$pwd.focus();
				return;
			}
			if (pwd.length < 6) {
				alert("密码至少6位！");
				$pwd.focus();
				return;
			}

			var $xy = $("#xyck").find("input[type='checkbox']");
			if ($xy.attr("checked") != "checked") {
				alert("需要您先同意会员协议^.^");
				return;
			}

			var $this = $(this);
			$.ajax({
				url : "${contextPath}/wechat/doReg",
				type : "post",
				dataType : "json",
				data : JSON.stringify({
					params : {
						phone : phone,
						valicode : valicode,
						pwd : pwd
					}
				}),
				cache : false,
				contentType : "application/json",
				beforeSend : function(xhr) {
					$this.text("注册中。。。").attr("disabled", "disabled");
				},
				success : function(res, succ, xhr) {
					if (res) {
						if (res.success) {
							window.location.href = "${contextPath}/wechat/custService/vippay";
							res.msg && alert(res.msg);
						} else {
							res.msg && alert(res.msg);
						}
					}
				},
				error : function(xhr, errorType, errorInfo) {
					alert("请求错误！");
				},
				complete : function(xhr, ts) {
					$this.text("注册并登录").removeAttr("disabled");
				}
			});
		});
	});
</script>
</html>